<template>
  <div class="order">
    <van-nav-bar
        title="我的订单"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"/>
    <van-tabs class="tab_nav" v-model="activeName" color="#027FFE" line-width="35" @click="openTabNumber">
      <van-tab title="订单" name="a">
        <van-skeleton
            title
            :row="8"
            :loading="loading"
            class="skeleton_body">
          <div v-for="item in orderList" :key="item.order_id" class="tab_item">
            <div class="top_body">
              <span>订单号：{{item.order_sn}}</span>
              <span v-if="item.order_status === 3" class="status_01">交易成功</span>
              <span v-if="item.order_status === 2" class="status_02">部分支付</span>
              <span v-if="item.order_status === 1" class="status_02">待付款</span>
              <span v-if="item.order_status === 99" class="status_03">已取消</span>
              <span v-if="item.order_status === 4" class="status_03">申请退款</span>
              <span v-if="item.order_status === 5" class="status_03">已退款</span>
              <span v-if="item.order_status === 6" class="status_03">申请专业</span>
              <span v-if="item.order_status === 98" class="status_03">无效订单</span>
              <span v-if="item.order_status === 0" class="status_03">没有订单</span>
            </div>
            <div class="content_body">
              <span>{{item.product_name}}</span>
            </div>
            <div class="footer_body">
              <span>总额：<em>¥{{item.order_amount}}</em></span>
              <span>实付：<em>{{item.real_price}}</em></span>
              <a v-if="item.order_status === 1" href="javascript:;"  @click="$router.push({ path:'/personal-order-detail', query:{ id: item.order_id }})">去付款</a>
              <a v-if="item.order_status === 2" href="javascript:;"  @click="$router.push({ path:'/personal-order-detail', query:{ id: item.order_id }})">付尾款</a>
            </div>
          </div>
          <div class="no_order" v-if="orderList.length === 0">
            <van-icon name="balance-list-o" />
            <P>没有订单</P>
          </div>
        </van-skeleton>
      </van-tab>
      <van-tab title="收据" name="b">
        <van-skeleton
            title
            :row="8"
            :loading="loading"
            class="skeleton_body">
          <div v-for="item in receiptData" :key="item.order_sn" class="tab_item">
            <div class="top_body border_body">
              <span>订单号：{{item.order_sn}}</span>
            </div>
            <div v-for="tabItem in item.itemList" :key="tabItem.itemname" class="top_body border_body">
              <span>{{tabItem.itemname}}：<em>¥{{tabItem.price}}</em></span>
              <span class="status_01">已支付</span>
            </div>
            <div class="footer_body">
              <strong>总计：<em>¥{{item.total_price}}</em></strong>
            </div>
          </div>
          <div class="no_order" v-if="receiptData.length === 0">
            <van-icon name="balance-list-o" />
            <P>没有收据</P>
          </div>
        </van-skeleton>
      </van-tab>
      <van-tab title="发票" name="c">
        <div class="invoice_body">
          <van-skeleton
              title
              :row="8"
              :loading="loading"
              class="skeleton_body">
            <div class="invoice_item" v-for="item in invoiceData" :key="item.invoice_sn">
              <img class="img_invoice" src="../../../assets/img/modules/psersonal/invoice_1.png" alt="">
              <div class="text_body">
                <p class="code_number">单号：{{item.invoice_sn}}</p>
                <p>{{item.size}}  /  可下载</p>
                <p>{{item.create_time}}</p>
              </div>
              <a :href="item.invoice_pdf" download="_incoive.pdf">
                <img src="../../../assets/img/modules/psersonal/coupon_2.png" alt="">
              </a>
            </div>
            <div class="no_order" v-if="invoiceData.length === 0">
              <van-icon name="balance-list-o" />
              <P>没有发票</P>
            </div>
          </van-skeleton>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: 'order',
  components: {},
  data () {
    return {
      activeName: 'a',
      loading: true,
      orderList: [],
      receiptData: [],
      invoiceData: []
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 16:04
     *@function  切换
     *****************************************/
    openTabNumber (value) {
      switch (value) {
        case 'a' :
          this.getList()
          break
        case 'b' :
          this.getTabB()
          break
        case 'c' :
          this.getTabC()
          break
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 9:33
     *@function  获取订单列表数据
     *****************************************/
    getList () {
      this.loading = true
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getOrderList?phone=${this.$store.state.personal.phone || this.$route.query.phone}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('获取数据失败')
        }
        if (res.data) {
          this.orderList = res.data
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(() => {})
    },
    /*
    *@author wf_Huang
    *@Time 2019/7/18 0018 15:48
    *@function  接收收据
    *****************************************/
    getTabB () {
      this.loading = true
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getReceiptByPhone?phone=${this.$store.state.personal.phone || this.$route.query.phone}&receipt=1`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('获取数据失败')
        }
        this.receiptData = res.data
        this.loading = false
      }).catch(() => {})
    },
    /*
    *@author wf_Huang
    *@Time 2019/7/18 0018 15:48
    *@function  接收发票
    *****************************************/
    getTabC () {
      this.loading = true
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getReceiptByPhone?phone=${this.$store.state.personal.phone || this.$route.query.phone}&receipt=2`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('获取数据失败')
        }
        this.invoiceData = res.data
        this.loading = false
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#f8f8f8')
    this.getList()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .order {
    background-color: #f8f8f8;
    height: 100%;
    .van-nav-bar .van-icon {
      color: #231916;
      vertical-align: middle;
    }
    .van-nav-bar__text {
      display: inline-block;
      margin: 0 -15px;
      padding: 0 15px;
      color: #231916;
      vertical-align: middle;
    }
    .skeleton_body{
      padding: 30px;
    }
    .no_order{
      font-size: 30px;
      color: #e6e6e6;
      text-align: center;
      padding: 300px 0;
      i{
        font-size: 160px;
      }
    }
    .tab_nav {
      height: 44px;
      box-shadow: 0 7px 7px rgba(0,0,0,0.05);
      margin-bottom: 30px;
      .tab_item{
        background-color: #ffffff;
        margin-top: 30px;
        .top_body{
          padding: 20px 40px;
          display: flex;
          justify-content: space-between;
          line-height: 40px;
          span{
            font-size: 28px;
            color: #222222;
            letter-spacing: 0;
          }
          .status_01{
            color: #027FFE;
          }
          .status_02{
            color: #FBA146;
          }
          .status_03{
            color: #999999;
          }
        }
        .border_body{
          border-bottom: 1px solid #E6E6E6;
          em{
            color: #FF0000;
            font-style: normal;
          }
        }
        .content_body{
          padding: 50px 40px;
          border-bottom: 1px solid #E6E6E6;
          border-top: 1px solid #E6E6E6;
          font-size: 28px;
          color: #222222;
          line-height: 40px;
          height: 180px;
          font-weight: 600;
          span{
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
          }
        }
        .footer_body{
          padding: 20px 40px;
          display: flex;
          flex-wrap: wrap;
          line-height: 60px;
          span,strong{
            font-size: 28px;
            color: #222222;
            margin-right: 30px;
            &:nth-child(2){
              margin-right:auto
            }
            em{
              color: #FF0000;
              font-style: normal;
            }
          }
          a{
            background: #FA3A51;
            border-radius: 4px;
            font-size: 28px;
            color: #FFFFFF;
            width: 180px;
            line-height: 64px;
            text-align: center;
          }
        }
      }
      .invoice_body{
        padding-bottom: 50px;
        .invoice_item{
          margin-top: 30px;
          padding: 40px;
          display: flex;
          justify-content: space-between;
          background-color: #ffffff;
          .img_invoice{
            width: 250px;
            height: 140px;
            border: 2px solid #D8D8D8;
          }
          .text_body{
            width: 50%;
            p{
              font-size: 24px;
              color: #999999;
              margin: 12px 0;
            }
            .code_number{
              font-size: 28px;
              color: #222222;
            }
          }
          a{
            img{
              width: 36px;
              height: 34px;
            }
          }
        }
      }
    }
  }
</style>
